<template>
 <view class="main">
	<view class="main1">
		<view class="main2">
		  <view class="p2-1">
	        <image :src="psdetail.avatar" class="pimg1"></image>
			<view class="p2-c">
			  <view class="p2-c-1">{{psdetail.xm}}</view>
			  <view class="p2-c-2" v-if="psdetail.level==3"> 达人影像拍手</view>
			  <view class="p2-c-2" v-if="psdetail.level==2"> 普通拍手</view>
			  <view class="p2-c-2" v-if="psdetail.level==1"> 实习拍手</view>
			</view> 
			<view class="p2-r" v-if="showitem==1">
				<view class="p2-r-3 pbtn" @click="settype(1)" v-if="psdetail.yx==0">
					<image src="https://ppp.new.zeroitem.cn/ppp/jja.png" class="pimg3"></image>
					为我优选
				</view>
				<view class="p2-r-3 pbtn" @click="settype(2)" v-if="psdetail.yx==1" style="background:#949DE1;color:white;">
					<image src="https://ppp.new.zeroitem.cn/ppp/jja.png" class="pimg3"></image>
					已加优选
				</view>			
				
				<view class="p2-r-1 pbtn" @click="settype(1)" v-if="1==2">
					<image src="https://ppp.new.zeroitem.cn/ppp/ps/1.png" class="pimg3"></image>
					投诉举报
				</view>
				<view class="p2-r-2 pbtn" @click="settype(3)" v-if="psdetail.lhei==0">
					<image src="https://ppp.new.zeroitem.cn/ppp/ps/8.png" class="pimg4"></image>
				    为我拉黑
				</view>
				<view class="p2-r-2 pbtn" @click="settype(4)" v-if="psdetail.lhei==1" style="background:#949DE1;color:red;">
					<image src="https://ppp.new.zeroitem.cn/ppp/ps/8.png" class="pimg4"></image>
					已经拉黑
				</view>					
			</view>
		  </view>
		  <view class="p2-2">
			 <image src="https://ppp.new.zeroitem.cn/ppp/ps/2.png" class="pimg5"></image>
			 <view class="p2-2-1">
			   {{psdetail.desc}}
			 </view>  
		  </view>
		  <view class="p3-3"> {{psdetail.bd.result.addressComponent.city}}.{{psdetail.bd.result.addressComponent.district}}</view>
		</view>
	     <view class="part2">
		   <view class="pt2-1">
			   <view class="ptx-1">{{psdetail.order_num}}</view>
			   <view class="ptx-2">订单</view>
		   </view>
		   <view class="ptline"></view>
		   <view class="pt2-2">
			   <view class="ptx-1">{{psdetail.yxnum}}</view>
			   <view class="ptx-2">优选</view>
		   </view>
		   <view class="ptline"></view>
		   <view class="pt2-3">
			   <view class="ptx-1">{{psdetail.vote_num}}</view>
			   <view class="ptx-2">点赞</view>
		   </view>
		 </view>
	</view> 
	<view class="part3">
	   <view class="part3-1" :class="[{'pcur':tab == 1}]" @click="settab(1)">达人优选</view>
	   <view class="part3-2" :class="[{'pcur':tab == 2}]" @click="settab(2)">普通作品</view>
	   <view class="part3-2" :class="[{'pcur':tab == 3}]" @click="settab(3)">日历排档</view>
	</view>
	
	<block v-if="tab==1">
   <view class="part5" v-for="(item,index) in yxlist">
    <view class="playbtn"  v-if="item.play==0" @click="showplay(index)"></view>
    <view class="playbtn1"  v-if="item.play==1"></view>
	  <view class="part5-1">
		 <view class="p5-1-1">{{item.zpmc}}</view> 
		 <view class="p5-1-2" @click="znum(item.id,index)">{{item.znum}}
		 <image src="https://ppp.new.zeroitem.cn/ppp/ps/6.png" class="pimg8"></image>
		 </view>
		 <button open-type="share"  :data-name="item.zpmc" data-type="1" :data-pic="item.video_pic" :data-id="item.id" style="height:48rpx;width:48rpx">
			<image src="https://ppp.new.zeroitem.cn/ppp/fxshare.png" class="pimg8"></image> 
		 </button>
	  </view> 

	  <video :src="item.src1" class="videoc" objectFit="cover" :id="'id'+item.id" @play="videoPlayHandle('id'+item.id)" v-if="item.play==1" style="width:100%;height:400rpx"></video>
	  <image :src="item.video_pic" class="videoc" v-if="item.play==0" @click="showplay(index)" style="width:100%;height:400rpx"></image>
	  <view class="part5-2">
		 <view class="p5-2-1">{{item.ckjg}}￥</view>  
		 <view class="cha" @click="jump(item.id)">
		     <image src="https://ppp.new.zeroitem.cn/ppp/chap.png" class="pimg8"></image>
			 查看详情  
		 </view>
		 <image src="https://ppp.new.zeroitem.cn/ppp/ps/9.png" class="pimg9"></image>
		 <view class="p5-2-2" @click="pth(item.id)">拍同款</view>
	  </view>
   </view>
   </block>	
   
  <block v-if="tab==2">
  <view class="part5" v-for="(item,index) in jlist" style="margin-top:130rpx">
  	  <view class="part5-1">
  		 <view class="p5-1-1">{{item.pdate}} {{item.ptime}}</view>
		 <button open-type="share"  data-name="精彩的视频拍摄" data-type="2" :data-pic="item.video_pic" :data-id="item.id" style="height:48rpx;width:48rpx">
		  <image src="https://ppp.new.zeroitem.cn/ppp/fxshare.png" class="pimg8"></image> 
		 </button>
  	  </view> 
  	<video :src="item.src1" class="videoc" objectFit="cover" :id="'oid'+item.id" @play="ovideoPlayHandle('oid'+item.id)" v-if="item.play==1" style="width:100%;height:400rpx"></video>
  	<image :src="item.video_pic" class="videoc" v-if="item.play==0" @click="oshowplay(index)" style="width:100%;height:400rpx"></image>
  	  <view class="part5-2">
  		 <view class="p5-2-1">{{item.total_price}}￥</view>  
		 <view class="cha" @click="jump1(item.id)">
			<image src="https://ppp.new.zeroitem.cn/ppp/chap.png" class="pimg8"></image>
			 查看详情
		  </view>
  		 <image src="https://ppp.new.zeroitem.cn/ppp/ps/9.png" class="pimg9"></image>
  		 <view class="p5-2-2" @click="pth1(item.id)">拍同款</view>
  	  </view>
  </view>
  </block> 


	<block v-if="tab==3">
  
  <view class="cp1">
  		<view class="cp1-1">{{sdatestr1}}</view> 
  		<view class="cp1-2"></view>
  </view>	 
  <view class="cp3">
  		<view class="cp3-1">一</view>  
  		<view class="cp3-1">二</view>
  		<view class="cp3-1">三</view>
  		<view class="cp3-1">四</view>
  		<view class="cp3-1">五</view>
  		<view class="cp3-1">六</view>
  		<view class="cp3-1">日</view>
  </view>
  <view class="cp4" v-for="item1 in cal1">
  		<view class="cp4-1" :class="[{'cur1':'100'==item2.zt},{'cur2':item2.zt=='010'},{'cur3':item2.zt=='001'},{'cur4':item2.zt=='110'},{'cur5':item2.zt=='011'},{'cur6':item2.zt=='101'},{'cur7':item2.zt=='111'}]" v-for="item2 in item1">
  		<view class="mp1"></view>
  		<view class="mp2">{{item2.day}}</view>
  		<view class="mp3"></view>	
  		</view> 		
  </view>
  
  
  <view class="cp1">
  		<view class="cp1-1">{{sdatestr2}}</view> 
  		<view class="cp1-2"></view>
  </view>	 
  <view class="cp3">
  		<view class="cp3-1">一</view>  
  		<view class="cp3-1">二</view>
  		<view class="cp3-1">三</view>
  		<view class="cp3-1">四</view>
  		<view class="cp3-1">五</view>
  		<view class="cp3-1">六</view>
  		<view class="cp3-1">日</view>
  </view>
  <view class="cp4" v-for="item3 in cal2">
  		<view class="cp4-1" :class="[{'cur1':'100'==item4.zt},{'cur2':item4.zt=='010'},{'cur3':item4.zt=='001'},{'cur4':item4.zt=='110'},{'cur5':item4.zt=='011'},{'cur6':item4.zt=='101'},{'cur7':item4.zt=='111'}]" v-for="item4 in item3">
  		<view class="mp1"></view>
  		<view class="mp2">{{item4.day}}</view>
  		<view class="mp3"></view>	
  		</view> 		
  </view>
  
   </block>	






  
  
  <view class="mask" v-if="zt==1">
     <view class="qtc">
  		<view class="tctxt-1 txt1">
  		  <view>加为优选后</view>
  		  <view>您可以在个人中心，我的优选里面实时关注拍手最新作品！</view>
  		</view> 
  		<view class="tctxt-2 txt2">是否加为优选？</view> 
  		<view class="tcbtn1 btnm">
  		  <view class="tcbtn btn1" @click="add_yx">确定</view>
  		  <view class="tcbtn btn2" @click="cancel_yx">取消</view>
  		</view>
  	  </view>
  </view>
  
 <view class="mask" v-if="zt==2">
    <view class="qtc">
 		<view class="tctxt-1 txt1">
 		  <view>取消优先</view>
 		  <view>取消优选后，不再关注拍手作品动态！</view>
 		</view> 
 		<view class="tctxt-2 txt2">是否取消优先？</view> 
 		<view class="tcbtn1 btnm">
 		  <view class="tcbtn btn1" @click="add_yx">确定取消</view>
 		  <view class="tcbtn btn2" @click="cancel_yx">再想想</view>
 		</view>
 	  </view>
 </view> 
  
  
  
  
  
   
   <view class="mask" v-if="zt==3">
      <view class="qtc">
		<view class="tctxt-1 txt1">
		  <view>拉黑对手后</view>
		  <view>系统不再分配订单给拍手！</view>
		</view> 
		<view class="tctxt-2 txt2">是否拉黑该拍手？</view> 
		<view class="tcbtn1 btnm">
		  <view class="tcbtn btn1" @click="cancel_yx">再想想</view>
		  <view class="tcbtn btn2" @click="add_lhei">确认拉黑</view>
		</view>
	  </view>
   </view>
   
  <view class="mask" v-if="zt==4">
     <view class="qtc">
  		<view class="tctxt-1 txt1">
  		  <view>取消拉黑</view>
  		  <view>取消拉黑后，系统会正常分配订单给拍手！</view>
  		</view> 
  		<view class="tctxt-2 txt2">是否取消拉黑拍手？</view> 
  		<view class="tcbtn1 btnm">
  		  <view class="tcbtn btn1" @click="cancel_yx">再想想</view>
  		  <view class="tcbtn btn2" @click="add_lhei">确认取消</view>
  		</view>
  	  </view>
  </view> 
   
   
   
   
		  
   <view class="mask" v-if="zt==5">
      <view class="qtc qtcm">
		<view class="tctxt-1 txt1 txt3">
		  <view class="txt1-1">举报当前拍手！</view>
		  <view class="txt1-2">请选择举报原因，恶意举报平台将追究责任！</view>
		</view>
		<radio-group>
		<view class="ppm-1">
		  <view class="pm1">发布虚假订单信息</view>
		  <radio value="r1" class="pm2"/>
		</view> 
		<view class="ppm-1" style="margin-top:56rpx">
		  <view class="pm1">
			对我进行骚扰
			<view class="ppm1">（沟通色情、广告、欺诈等内容）</view>
			</view>
		  <radio value="r2" class="pm2"/>
		</view>	
		<view class="ppm-1" style="margin-top:56rpx">
		  <view class="pm1">议价/强制要求线下支付</view>
		  <radio value="r3" class="pm2"/>
		</view>					
		</radio-group>
		<view class="tcbtn1" style="margin-top:54rpx;">
		  <view class="tcbtn btn2" @click="qbtn">确认举报</view>
		</view>
	  </view>
   </view>		  
		  
		  
	   
	   
 </view>
</template>

<script>
import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		toLogin
	} from '@/utils/login'
	
	import {
		loadingFun,
		menuJump
	} from '@/utils/tools'	
    import {
	   yxlist,psdetail,savepsaddress,delpszp,zpport,jdjl,dianzan,psfav,mycal
	} from '@/api/ppp'	
    import {
		loadingType
	} from '@/utils/type'
	import {
		getUser
	} from '@/api/user';
	const app = getApp()	
	export default {
	    data() {
	        return {
             zt:0,
			 showitem:1,
			 vsrc:"",
			 yxlist:[],
			 jlist:[],
			 psdetail:[],
			 pid:0,
			 page: 1,
			 cal1:[],
			 cal2:[],
			 sdate1:"",
			 sdatestr1:"",
			 sdate2:"",
			 sdatestr2:"",
			 video:null,
			 ovideo:null,
			userInfo:[],
			 tab:1,
			 status: loadingType.LOADING
	        }
	    },
		onShow(){
	      this.getUserInfoFun();
		},
		onReachBottom() {
		if(this.tab==1){
		 this.showyxlist();
		}
		if(this.tab==2){
		 this.getjdjl();	
		}
		 setTimeout(() => {
		 	uni.stopPullDownRefresh();
		 }, 1000);	
		},
		onLoad(option){
		 this.pid=option.pid;
		 this.showyxlist();
		 this.getdetail();
		 this.getcal();
		},
		
		onShareAppMessage(res) {
		   var sn=this.userInfo.sn;
           if(res.target.dataset.type==1){
		　　return {
		　　　　title: res.target.dataset.name,
		　　　　path: '/pages/ppp/ps/zpshare?type=1&sn='+sn+'&id='+res.target.dataset.id,
		       imageUrl: res.target.dataset.pic
		　　}
	       }
		   if(res.target.dataset.type==2){
		   　　return {
		   　　　　title: res.target.dataset.name,
		   　　　　path: "/pages/ppp/ps/zpshare?type=2&sn="+sn+"&id="+res.target.dataset.id,
		          imageUrl: res.target.dataset.pic
		   　　}
		      }
		
		},
	    methods: {
			async getUserInfoFun() {
				const {
					data,
					code
				} = await getUser()
				if (code == 1) {
					this.userInfo = data
				} 
			},
			
        async getcal(){
			const{
			 code,
			  msg,
			  data
			}= await mycal({uid:this.pid});
			if(code==1){ 
			  this.cal1=data.cal1;
			  this.cal2=data.cal2;
			  this.sdate1=data.sdate1;
			  this.sdate2=data.sdate2;
			  this.sdatestr1=data.sdatestr1;
			  this.sdatestr2=data.sdatestr2;
			}  
		  },			

			async znum(id,index){
			  var that=this;
			  var yxlist=that.yxlist
			  const{
			   code,
			   msg,
			   data
			  }= await dianzan({id:id});
			  if(code==1){
			   yxlist[index].znum=data.znum;
			   that.yxlist=yxlist;
			   uni.showToast({
			   	 icon:"none",
				 title:"点赞成功"
			   })
			  }	
			},
			pth(id){
			 wx.navigateTo({
			  url:"/pages/ppp/order/pthorder?id="+id
			 })	
			},
			pth1(id){
			 wx.navigateTo({
			  url:"/pages/ppp/order/pthorder?oid="+id
			 })	
			},
			jump1(oid){
			  uni.navigateTo({
			   url:"/pages/ppp/ps/zpshare?type=2&id="+oid
		       })  
			},
			jump(zid){
			 uni.navigateTo({
			 	url:"/pages/ppp/ps/zpshare?type=1&id="+zid
			 })	
			},
		async getjdjl(){
			var that=this;
			 const data = await loadingFun(jdjl,this.page,this.jlist,this.status,{pid:this.pid});
			 if (!data) return
			 this.page = data.page
			 this.jlist = data.dataList
			 this.status = data.status	
		  },				
		settab(tab_id){
		 var that=this;
		 that.tab=tab_id;
		 if(tab_id==2){
		  that.page=1;
		  that.jlist=[];
		  that.status=loadingType.LOADING;
		  that.getjdjl();
		 }
		 if(tab_id==1){
		  that.page=1;
		  that.yxlist=[];
		  that.status=loadingType.LOADING;
		  that.showyxlist();
		 }
		},
		async add_yx(){
		  var that=this;
		  const{
		   code,
		   msg,
		   data
		  }= await psfav({otype:1,pid:this.pid});
		  if(code==1){
			this.zt=0;  
			uni.showToast({icon:"none",title:msg});
			if(data.opt=='add_fav'){that.psdetail.yx=1;}
			if(data.opt=='cancel_fav'){that.psdetail.yx=0;}
		  } 
		},
		async add_lhei(){
		  var that=this;
		  const{
		   code,
		   msg,
		   data
		  }= await psfav({otype:2,pid:this.pid});
		  if(code==1){
			this.zt=0;  
			uni.showToast({icon:"none",title:msg});
			if(data.opt=='add_lhei'){that.psdetail.lhei=1;}
			if(data.opt=='cancel_lhei'){that.psdetail.lhei=0;}
		  } 
		},		

		cancel_yx(){
		  this.zt=0;	
		},
		  showplay(index){
		  	  var that=this;
		  	  var yxlist=that.yxlist
		  	  yxlist[index].play=1;
		  	  yxlist[index].src1=yxlist[index].video_src;
		  	  that.yxlist=yxlist;
		  	  that.videoPlayHandle('id'+yxlist[index].id);
		  	  
		  	},
		 videoPlayHandle(id) {
		  	let newVideo = uni.createVideoContext(id);
		  	newVideo.id = id;
		  	if (!this.video) {
		  		this.video = newVideo;
		  		this.video.play();
		  		return
		  	}
		  	if (this.video.id !== newVideo.id) {
		  		newVideo.play();
		  		this.video.pause();
		  		this.video = newVideo;
		  	}
		  },
		  oshowplay(index){
		  	  var that=this;
		  	  var jlist=that.jlist
		  	  if(jlist[index].has_video==0){
		  		uni.showToast({icon:'none',title:'暂无相关视频'});
		  		return false;  
		  	  }
		  	  jlist[index].play=1;
		  	  jlist[index].src1=jlist[index].video_src;
		  	  that.jlist=jlist;
		  	  that.ovideoPlayHandle('oid'+jlist[index].id);
		  	  
		  	},
		    ovideoPlayHandle(id) {
		  	let newVideo = uni.createVideoContext(id);
		  	newVideo.id = id;
		  	if (!this.ovideo) {
		  		this.ovideo = newVideo;
		  		this.ovideo.play();
		  		return
		  	}
		  	if (this.ovideo.id !== newVideo.id) {
		  		newVideo.play();
		  		this.ovideo.pause();
		  		this.ovideo = newVideo;
		  	}
		  },		
		  qbtn(){
			this.zt=0;
		  },
		  settype(type){
			this.zt=type; 
		  },
		  async showyxlist(){
		   var odata={pid:this.pid}; 
		   var that=this;
		   const data = await loadingFun(yxlist,this.page,this.yxlist,this.status,{pid:this.pid});
		   if (!data) return
		   this.page = data.page
		   this.yxlist = data.dataList
		   this.status = data.status	 
	     },
		 async getdetail(){
		 			var that=this;
		 			const{
		 			 code,
		 			 msg,
		 			 data
		 			}= await psdetail({pid:this.pid});
		 			if(code==1){
		 			  that.psdetail=data;
		 			}	
		 },
	 }
	}
</script>

<style>
 @import "./main.css";	
</style>
